<template>
	<div class="wrapper">
		<header>TabBar 案例</header>
		<keep-alive>
			<component :is="comName[currentIndex]" :arr="list"></component>
		</keep-alive>
		<footer>
			<div
				@click="toggle(index)"
				v-for="(item, index) in nameList"
				:key="index"
			>
				{{ item }}
			</div>
		</footer>
	</div>
</template>

<script>
import GoodsHead from "./goods-head.vue";
import GoodsSearch from "./goods-search.vue";
import MyInfo from "./my-info.vue";
export default {
	components: {
		GoodsHead,
		GoodsSearch,
		MyInfo,
	},
	data() {
		return {
			comName: ["GoodsHead", "GoodsSearch", "MyInfo"],
			currentIndex: 0,
			list: [],
			nameList: ["商品列表", "商品搜索", "我的信息"],
		};
	},
	created() {
		this.onSearch();
	},
	methods: {
		async onSearch() {
			const res = await this.http({
				method: "get",
				url: "https://www.escook.cn/api/goods",
			});
			this.list = res.data.data;
			console.log(this.list);
		},
		toggle(index) {
			this.currentIndex = index;
		},
	},
};
</script>

<style scoped>
.center {
	display: flex;
	align-items: center;
}
.wrapper {
	margin: 50px 0;
}
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	color: #fff;
	text-align: center;
	line-height: 50px;
	background-color: #0e79ff;
}
footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 50px;
	background-color: #eee;
	padding: 0 12px;
	box-sizing: border-box;
	justify-content: space-around;
	display: flex;
	align-items: center;
}
footer > div {
	width: 80px;
	height: 50px;
	line-height: 50px;
	text-align: center;
}
</style>